<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>20220921</title>
	</head>
	<body>
		
		
		
		
<!-- 	块级元素：独占一行，可以设置高度宽度 h1 - h6 p div ul ol li...
		
		行内元素：不独占一行，不能设置宽度高度a strong b em i del s ins u span
		(理解成一个文本，最终行内元素的尺寸取决于内部的内容)
		
		行内块元素：不独占一行，能设置宽度高度input img
		-->
		
		<style>
			/* 没有效果 因为是行内元素*/
			/* a{
				width: 500px;
				height: 300px;
			} */
			
			/* 但可以改为块级元素 */
			a{
				width: 500px;
				height: 300px;
				
				/* display: none;隐藏属性 开发者工具仍可以看到 但是界面上看不到 */
				display: block;
				
			} 
			
		</style>
		 
		<a href="#">超链接</a>
		<a href="#">超链接</a>
		<a href="#">超链接</a>
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		<!-- 圆角矩形
		 border-radius边角弧度
		 圆形  border-radius为正方形px的一半/也可以写50%
		 胶囊  border-radius为长方形的高/边px的一半/也可以写50%
		 也可以单边设置border-top-left-radius:2em;
					  border-top-right-radius:2em;
					  border-bottom-right-radius:2em;
					  border-bottom-left-radius:2em;
					  复合写法
					  border-radius: 10px 20px 30px 40px;顺序和前面的一样
		 -->
<!-- 		<Style>
			
			
			
		/*  div{
				width: 200px;
				height: 100px;
				background-color: aquamarine;
				border-radius: 20px;
			} */
			
			
			/* div{
				width: 200px;
				height: 200px;
				background-color: aquamarine;
				border-radius: 100px;
			} */
			div{
				width: 600px;
				height: 200px;
				background-color: aquamarine;
				border-radius: 100px;
			}
		</Style>
		
		<div>猫哥</div> -->
		
		
	
		
		<!-- 设置背景图片 
		      设置背景图片 默认是平铺状态
			  通过background-repeat： no-repeat,repeat-x,repeat-y可以更改平铺状态
				背景图片会覆盖背景颜色
				设置背景图的位置 background-position 常用:top bottom left right center
				背景图大小  background-size contain cover...-->
		<!-- <style>
		div{
				width: 600px;
				height: 500px;
				font-size: 20px;
				color: gray;
				text-align: center;
				line-height: 500px;
				
				background-color: rgb(17, 141, 216);
				background-image: url(img/logo2.jpg);
				/* background-repeat: no-repeat; */
				background-repeat: no-repeat;
				/* background-position: 0 0;*/
				background-position: center; 
				background-size: cover;

		

			}
		</style>
		
		<div>第一行</div> -->
		

		
		<!-- 行高和height一样  文字就可以height居中 -->
<!-- 		<style>

			div{
				width: 100px;
				height: 180px;
				font-size: 10px;
				color: red;
				background-color: bisque;

				text-align: center;
				line-height: 180px;
				
			}
		</style>
		<div>第一行</div> -->
		
		
		<!-- 行高 -->
<!-- 		<style>
			.one{
				line-height: 50px;
			}
		</style>
		
		<div class="one">第一行</div>
		<div>中间行</div>
		<div>下一行</div> -->
		
		
		<!-- 缩进 -->
<!-- 		<style>
			p{
				text-indent: 2em;
			}
		</style>
		
		<p>这是Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat amet impedit explicabo nihil praesentium laudantium dolor sed necessitatibus aspernatur laborum. Voluptatem aperiam voluptas nihil ipsum ab enim accusamus consequatur nostrum!
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe, amet repellendus enim nihil officia quia harum praesentium sapiente eaque accusantium pariatur hic! Dolorum minima optio repellat amet cupiditate excepturi! Debitis?
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis minima possimus modi sequi libero omnis ducimus fuga rerum quas temporibus! Excepturi, pariatur? Enim, assumenda voluptate iure accusamus dolorum perferendis fugit.
		</p> -->
		
		
		
		
<!-- 		取消a标签的下划线 -->
<!-- 		<style>
			a{
				text-decoration: none;
			}
			
		</style>
		
		<a href="#">超链接</a>
		<a href="#">还是超链接</a> -->
		
		
		
		
		
<!-- 		<style>
			.one{
				text-align: left;
			} 
			
			.two{
				text-align: center;
			}
			
			.three{
				text-align: right;
			}
			
		</style>
		
		
		<div class="one">猫哥</div>
		<div class="two">猫哥</div>
		<div class="three">猫哥</div>
		 -->
		
<!-- 		<style>
				/* color取值可以用颜色；rgb十进制（取值0~255）；#16进制 ；rgba多一个透明的分量*/
/* 			.one{
				color: rgb(red, green, blue);
			} */
			
			.one{
				color: rgb(200, 0, 0);
			} 
			
			.two{
				color: rgb(0, 200, 0);
			}
			
			/* 三和五一样 #后 每两个对应rgb里面的一个 两两相同就可以缩写 */
			.three{
				color:#00ff00;
			}
			
			.four{
				color: #0f0;
			}
			
			
		</style>
		
		<div class="one">猫哥</div>
		<div class="two">猫哥</div>
		<div class="three">猫哥</div>
		<div class="four">猫哥</div> -->
		
		
		
		
<!-- 		<style>

			.one{
				/* 字体样式 */
				font-family: "微软雅黑";			
				/* 字体大小 */
				font-size: 30px; 
				/* 字体粗细 */
				
				font-weight: 1000;
			}
			.two{
				font-family: "楷体";
				font-size: 10px;
				font-weight: 20;
			}
			
			.three{
				/* 字体类别主要取消倾斜 */
				font-style: normal;
			}
		</style>
		

		<div class="one">这是第一行div</div>
		<div class="two">这是第二行div<div>
		<div><i class="three">这是第二个div</i></div>
		<div class="fout"></div> -->
		
	</body>
</html>
